
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CityList from '@/components/CityList.vue'
import { useRouter } from '@/plugin/uni-mini-router'
import { http } from '@/utils/http'
import { useCinemaStore } from '@/store/params'

const cinemaStore = useCinemaStore()
const router = useRouter()

const currentCity = ref('北京')
const searchValue = ref('')
const isOpenCity = ref(false)
const imgUrl = ref('/static/movie_bg.png')
const cinemaList = ref([])
const loading = ref(false)

uni.$on('checkCity', (data) => {
    currentCity.value = data
})

const handleLogin = async () => {
  router.push({
    path: '/pages/login'
  })
}

const openCity = () => {
    // isOpenCity.value = true
    uni.navigateTo({
        url: '/pages/cityList'
    })
}

const clickCinematem = (cItem) => {
    // save cinemaName
    cinemaStore.setCinemaInfo({
        cinemaName: cItem.cinemaName,
        currentCity: currentCity.value
    })
    uni.switchTab({
        url: `/pages/firstTab`,
    })
}

const getCinema = (status) => {
  loading.value = true
  http.post('/movieSystem/cinema/getCinemaList', {
    cinemaName: searchValue.value,
    pageNum: 1,
    pageSize: 100
  }).then((res: any) => {
    if (res.success) {
        cinemaList.value = res.data.list
    } else {
        showError({
        msg: res.message
        })
    }
  }).finally(() => {
      loading.value = false
  })
}

getCinema()
onMounted(() => {
    getCinema()
})
</script>

<template>
  <PageLayout :navbarShow="true" navLeftText="" :navLeftArrow="false">
    <view>
    <wd-sticky>
        <view style="background: #fff; text-align: center;width:100vw;" class="flex justify-around">
            <view class="flex items-center justify-between">
                <wd-button type="text" @click="openCity">{{ currentCity }}</wd-button>
                <wd-icon name="arrow-down" size="22px"></wd-icon>
            </view>
            <!-- <wd-drop-menu style="flex: 1; min-width: 0;">
                <wd-drop-menu-item :title="currentCity" icon="arrow-down" icon-size="24px" @open="openCity"/>
            </wd-drop-menu> -->
            <wd-search placeholder-left placeholder="请输入电影院名称" cancel-txt="搜索" v-model="searchValue" @search="getCinema"/>
        </view>
        <view class="wrapper" v-show="isOpenCity">
            <view style="width:100%;height: 100%;background:#fff;" class="city-container">
                <CityList /> 
            </view>
        </view>
    </wd-sticky>

    <view style="height:180upx;background:#fff;" class="flex items-center justify-center p-8" >
       <wd-img :width="100" :height="100" :src="imgUrl" />
    </view>
    <!-- 定位地址 -->
    <view class="loc-container flex items-center pl-2">
        <wd-icon name="location" size="22px"></wd-icon>
        <view>定位中...</view>
    </view>
    <!-- 电影院列表 -->
    <view>
        <view class="cinema-list">
            <view class="cinema-item flex justify-between items-center border-bottom py-2 px-4" v-for="cinemaItem in cinemaList" :key="cinemaItem" @click="clickCinematem(cinemaItem)">
                <view class="flex flex-col">
                    <view class="cinema-name py-2 bold big-size">{{cinemaItem.cinemaName}}</view>
                    <view class="cinema-address py-2 mini-size">{{cinemaItem.cinemaAddress}}</view>
                </view>
                <view class="cinema-distance red">1.2 km</view>
            </view>
        </view>
    </view>

  </view>
</PageLayout>
</template>

<style>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width:100vw;
}
.border-bottom  {
    border-bottom: 1px solid #ccc;
}
.red {
    color: red;
}
.loc-container {
    height: 40px;
    background: var(--wot-color-theme);
    color: #fff;
}
.city-container {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
.bold {
    /* font-weight: bold; */
}
.big-size {
    font-size: 1.2rem;
}
.mini-size {
    font-size: 0.9rem;
    color: #6c6c6c;
}
</style>

<route type="" lang="json5">
  {
    "style": {
      navigationStyle: 'custom',
      navigationBarTitleText: '首页',
    }
  }
</route>
